<mat-toolbar class="title" color="primary">
  <div>Settings</div>
  <button mat-icon-button (click)="onNoClick()">
    <mat-icon>close</mat-icon>
  </button>
</mat-toolbar>
<div mat-dialog-content>
  <mat-form-field>
    <mat-label>Title</mat-label>
    <input matInput [(ngModel)]="data.title">
  </mat-form-field>
</div>
<div mat-dialog-content>
  <mat-form-field>
    <mat-label>Theme</mat-label>
    <mat-select [(value)]="data.theme" >
      <mat-option *ngFor="let theme of themeList | keyvalue" [value]="theme.value">
        {{theme.key}}
      </mat-option>
    </mat-select>
  </mat-form-field>
</div>

<ace-editor #editor
  [theme]="data.theme"
  [(text)]="data.text"
  [mode]="'markdown'"
  [readOnly]="false"
  [autoUpdateContent]="true"
  [durationBeforeCallback]="1000"
  style="min-height: 300px; width:100%; overflow: auto;"
></ace-editor>

<div mat-dialog-actions style="float: right; margin-bottom: 0rem;">
  <button mat-raised-button (click)="onNoClick()">Cancel</button>
  <button mat-raised-button color="primary" [mat-dialog-close]="data" cdkFocusInitial>Ok</button>
</div>